Hola, tengo una matriz de datos como la siguiente y hay un problema complicado para mí.
{data.menu.map((data2, i) => { menutitle:{data2.title} })}Necesito aplicar algo como lo anterior dentro de "MasterBanner", pero no sé cómo puedo hacer esto. ¿Alguien puede ayudarme?
import MasterBanner from "./MasterBanner"; const Data = [ { bgcolorcode: "#482624", title: "", desc: "", link: "", menu:[{ title:"Tshirt", img:"/images/home-banner/1.jpg" }, title:"Tshirt", img:"/images/home-banner/1.jpg" }], }, { bgcolorcode: "#858489", title: "", desc: "", link: "", menu:[{ title:"Tshirt", img:"/images/home-banner/1.jpg" }, { title:"Tshirt", img:"/images/home-banner/1.jpg" }], } ]; {Data.map((data, index) => { return ( <MasterBanner key={index} desc={data.desc} title={data.title} link={data.link} img={data.img} bgcolorcode={data.bgcolorcode}/ Necesito colocar datos de matriz anidados (menú) aquí /
/> ) })}EDITADO:
Import Link from "next/link"; import { Col, Container, Row } from "reactstrap"; const MasterBanner = ({ img, menuimg, menutitle, title, desc, link, classes, btn, btnClass, bgcolorcode }) => { return ( html codes --its not ready-- ); }; export default MasterBanner;export default function MasterBanner(props) { const { data } = props return ( {data.map(d) => ( <div>{d.title}</div> ... )} ) }